<script setup lang="ts">
import { useStore } from "vuex";
import Pagination from "@/components/common/pagination.vue";
import { IRoomListParams } from "@/api/interface";
import { useRouter } from "vue-router";

const router = useRouter();
const store = useStore();

function toDetail(item: any) {
  router.push({ path: `/roomDetail/${item.id}` });
  // console.log(item);
}
function changePage(pageNo: number) {
  store.dispatch("getRoomList", { pageNo } as IRoomListParams);
}
</script>

<template>
  <!-- 城市筛选 -->
  <div class="home-list">
    <div class="item" @click="toDetail(item)" v-for="item in store.state.roomList" :key="item.id">
      <img :src="item.pictureUrl" :alt="item.title" />
      <p class="title">{{ item.title }}</p>
      <p class="price">￥{{ item.price }}元</p>
    </div>
  </div>
  <!-- 分页 -->
  <Pagination @changePage="changePage"></Pagination>
</template>

<style scoped lang="scss"></style>
